<script setup lang="ts" generic="T extends any, O extends any">
const name = ref('')
const userString = localStorage.getItem('userInfo') as string
const user = JSON.parse(userString)
const isLogin = ref(false)
if (user)
  isLogin.value = true

const router = useRouter()
function go() {
  if (name.value)
    router.push(`/search/${encodeURIComponent(name.value)}`)
}

function goInfo() {
  router.push('/profile/userInfo')
}

async function onLoad() {
  await router.push('/')
  location.reload()
}
</script>

<template>
  <div class="navbar">
    <div flex class="items-center justify-center">
      <div flex class="ml-4 cursor-pointer items-center justify-center" @click="onLoad">
        <div>
          <img src="/house.png" class="h-10 w-10">
        </div>
        <div>
          <p ml-1 class="text-[#212020] font-bold">
            林语溪边居
          </p>
        </div>
      </div>

      <div class="flex-1">
        <TheInput
          v-model="name"
          ml-80
          placeholder="请输入您感兴趣的"
          autocomplete="false"
          @keydown.enter="go"
        /><div />
      </div>

      <div class="header-profile">
        <div class="notification">
          <div v-if="isLogin" @click="goInfo">
            <div class="mr-10 flex items-center justify-center">
              <el-avatar :size="40" :src="user.avatar" />
              <div class="ml-2 font-bold">
                {{ user.nickName }}
              </div>
            </div>
          </div>
          <router-link v-else class="link mr-5 cursor-pointer" to="/login">
            登录 / 注册
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
 .el-dropdown-link:focus {
  outline: none;
}
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  padding-top: 8px;
  background-color: rgba(255, 255, 255, 1);
  height: 60px;
  border-bottom: 1px solid #dedfe1;
  z-index: 3;
}

.header-profile {
  cursor: pointer;
}
</style>
